<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>人员看板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <style type="text/css">

        /* tooltip */
        #tooltip{
            position:absolute;
            border:1px solid #ccc;
            background:#333;
            padding:2px;
            display:none;
            color:#fff;
        }
    </style>
</head>
<body style="padding:10px;">
<div class="tplay-body-div">
<form class="layui-form serch" id="download" action="{:url('admin/working/index')}" method="get">
    <div class="layui-form-item" style="float: left;">

        <div class="layui-input-inline">
            <div class="layui-inline">
                <select id="search_type" name="search_type" lay-search="" lay-filter="search_type">
                    <option value="">请选择</option>
                    <option value="1" {eq name="$search_type" value="1"} selected=""{/eq}>分部门</option>
                    <option value="2" {eq name="$search_type" value="2"} selected=""{/eq}>全部</option>
                    <option value="3" {eq name="$search_type" value="3"} selected=""{/eq}>自由选择</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline" id="roleId" style="display: {eq name="$search_type" value="1"}block {else/} none {/eq} " >
            <div class="layui-inline">
                <select  name="role_id" lay-search="">
                    {volist name="$role" id="ro"}
                    <option value="{$ro.role_id}" {notempty name="$role_id"}{eq name="$role_id" value="$ro.role_id"} selected=""{/eq}{/notempty}>{$ro.role_name}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="begin_time" placeholder="开始日期" name="begin_time" value="{$begin_time}">
                </div>
            </div>
        </div>
        <div class="layui-input-inline">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="end_time" placeholder="结束日期" name="end_time" value="{$end_time}">
                </div>
            </div>
        </div>
        <input type="hidden" id="person_ids"name="person_ids" value="{$person_ids}">
        <button class="layui-btn layui-btn-sm" lay-filter="serch">查询</button>
        <button class="layui-btn layui-btn-sm" lay-submit lay-filter="download">导出</button>
    </div>
</form>

    <div style="width: 100%;overflow-x: scroll;">
    <table class="layui-table" lay-size="sm">
        <thead>
        <tr>
            <th><div style="width: max-content;">人员日期</div></th>
            {volist name="days" id="da"}
            <th <?php echo in_array($da['week'],[6,0])? "bgcolor='lightgray'" :"" ?> ><div style="width: max-content;">{$da.day}</div></th>
            {/volist}

        </tr>
        </thead>
        <tbody>
        {volist name="info" id="in"}
            <tr height="40px" style="max-height:40px;">
                <td><div style="width: max-content;">{$in.person_name}</div></td>
                {volist name="in['date_list']" id="tl"}
                <td tips-title="{$tl.task_content}" class="table-td-hover" {eq name="$tl.type" value="1"}bgcolor="#FF5722"{/eq} {eq name="$tl.type" value="2"}bgcolor="#2ec770"{/eq} >
                <a href="/admin/working/detail/person_id/{$in.person_id}/date/{$tl.years}-{$tl.months}" style="display: block;height: 28px;"></a>
                </td>
                {/volist}
            </tr>
        {/volist}
        </tbody>
    </table>
    </div>

    {include file="public/foot"}
    <script>
        layui.use('layer', function(){ //独立版的layer无需执行这一句
            var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

            //触发事件
            var active = {
                notice: function(othis){
                    //示范一个公告层
                    layer.open({
                        type: 1
                        ,title: false //不显示标题栏
                        ,closeBtn: false
                        ,area: '300px;'
                        ,shade: 0.8
                        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,btn: ['前往', '关闭']
                        ,btnAlign: 'c'
                        ,moveType: 1 //拖拽模式，0或者1
                        ,content:othis.attr("dat_content")

                        ,success: function(layero){
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '/admin/working/detail/person_id/'+othis.attr("dat_person")+"/years/"+othis.attr("dat_year")+"/months/"+othis.attr("dat_month")
                            });
                        }
                    });
                }
            };

            $('#layerDemo .layui-btn').on('click', function(){
                var othis = $(this), method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });

        });
    </script>
    <script type="text/javascript">

        layui.use('laydate', function(){
            var laydate = layui.laydate;
            laydate.render({
                elem: '#begin_time'
            });
            laydate.render({
                elem: '#end_time'
            });
        });

        //tips
        window.onload = function() {
            const hoverEles = $('.table-td-hover')
            let subTips;
            hoverEles.each(function(index, ele) {
                $(ele).hover(function() {
                   showHover(ele)
                }, function() {

                })
            })
            function showHover(ele) {
                subTips = layer.tips($(ele).attr('tips-title'), ele)
            }
        }
    </script>
    <script>
        layui.use(['layer', 'form'], function() {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form;
            $(window).on('load', function() {
                form.on('submit(download)', function(data) {
                    $.ajax({
                        url:"{:url('admin/working/index')}",
                        data:$('#download').serialize(),
                        type:'post',
                        async: false,
                        success:function(res) {
                            layer.msg(res.msg);
                            if(res.code == 1) {
                                location.href = res.url;
                            }
                        },
                        error: function(err) {
                            console.log('err', err)
                        }
                    });
                    return false;
                });
                form.on('select(search_type)',function (data) {
                    // console.log(data.value);
                    let type_value = data.value;
                    if(type_value == 1){
                        $('#roleId').show();
                        return false;
                    }else if(type_value == 3){
                        layer.open({
                            type: 2,
                            title: '选择人员',
                            area: ['451px', '450px'],
                            fixed: false, //不固定
                            content: "{:url('/admin/working/userIframe/')}"
                        });
                    }
                    $('#roleId').hide();
                })
            });
        });
    </script>
</div>
</body>
</html>
